import React, { Component } from 'react'

export default class index extends Component {

  constructor(props){
    super();
    this.state = {
      username:"范旭康"
    }

  }

  changeUsername=()=>{
    this.setState({
      ...this.state,
      username:"吕超"
    });

    this.refs.iptRef.value = "hehe";
  }
  
  render() {
    return (
      <div>
        <h1>受控组件</h1>
        {/* 组件里（标签里）跟react的状态有关系 */}
        <input type="text" value={this.state.username} />
        {/* 组件里（标签里）跟react的方法有关系 */}
        <input type="button" value="测试" onClick={this.changeUsername} />
        <h1>非受控组件</h1>
        <input type="text" ref="iptRef" />
      </div>
    )
  }
}
